<template>
  <div class="-mx-4 h-full relative overflow-x-hidden">
    <template v-if="ready">
      <GrantRequestIssueDetailPage v-if="isGrantRequestIssue(issue)" />
      <DataExportIssueDetailPage v-else-if="isDatabaseDataExportIssue(issue)" />
      <IssueDetailPage v-else />
    </template>
    <div v-else class="w-full h-full flex flex-col items-center justify-center">
      <NSpin />
    </div>
  </div>
  <FeatureModal
    :open="state.showFeatureModal"
    feature="bb.feature.multi-tenancy"
    @cancel="state.showFeatureModal = false"
  />
</template>

<script lang="ts" setup>
import { useTitle } from "@vueuse/core";
import Emittery from "emittery";
import { NSpin } from "naive-ui";
import { computed, onMounted, reactive, toRef } from "vue";
import { useI18n } from "vue-i18n";
import { FeatureModal } from "@/components/FeatureGuard";
import {
  DataExportIssueDetailPage,
  GrantRequestIssueDetailPage,
  IssueDetailPage,
  provideIssueContext,
  useBaseIssueContext,
  useInitializeIssue,
} from "@/components/IssueV1";
import {
  providePlanCheckRunContext,
  type PlanCheckRunEvents,
} from "@/components/PlanCheckRun/context";
import { useBodyLayoutContext } from "@/layouts/common";
import { useUIStateStore } from "@/store";
import {
  isGrantRequestIssue,
  isDatabaseDataExportIssue,
  isValidIssueName,
} from "@/utils";

interface LocalState {
  showFeatureModal: boolean;
}

defineOptions({
  inheritAttrs: false,
});

const props = defineProps<{
  projectId: string;
  issueSlug: string;
}>();

const { t } = useI18n();

const state = reactive<LocalState>({
  showFeatureModal: false,
});

const { isCreating, issue, isInitializing, reInitialize, allowEditIssue } =
  useInitializeIssue(toRef(props, "issueSlug"), toRef(props, "projectId"));
const ready = computed(() => {
  return !isInitializing.value && !!issue.value;
});
const uiStateStore = useUIStateStore();

const issueBaseContext = useBaseIssueContext({
  isCreating,
  ready,
  issue,
});

provideIssueContext(
  {
    isCreating,
    issue,
    ready,
    reInitialize,
    allowEditIssue,
    ...issueBaseContext,
  },
  true /* root */
);

providePlanCheckRunContext(
  {
    events: (() => {
      const emittery: PlanCheckRunEvents = new Emittery();
      emittery.on("status-changed", () => {
        // If the status of plan checks changes, trigger a refresh.
        issueBaseContext.events?.emit("status-changed", { eager: true });
      });
      return emittery;
    })(),
  },
  true /* root */
);

const { overrideMainContainerClass } = useBodyLayoutContext();

overrideMainContainerClass("!py-0");

onMounted(() => {
  if (!uiStateStore.getIntroStateByKey("issue.visit")) {
    uiStateStore.saveIntroStateByKey({
      key: "issue.visit",
      newState: true,
    });
  }
});

const documentTitle = computed(() => {
  if (isCreating.value) {
    return t("issue.new-issue");
  } else {
    if (ready.value && isValidIssueName(issue.value.name)) {
      return issue.value.title;
    }
  }
  return t("common.loading");
});
useTitle(documentTitle);
</script>

<style lang="postcss">
.issue-debug {
  @apply hidden bg-red-200/50 font-mono text-xs;
}
</style>
